<template>
  <el-dialog v-model="visible" :title="title" width="1100" show-footer show-zoom resize @close="close">
    <template #default>
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120" size="default">
        <el-form-item label="调拨单号" prop="location_code" v-if="handleType != 'add'">
          {{ form.adjust_in_order_no }}
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="调出仓" prop="type">
              {{ form.out_warehouse_name }}

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的仓" prop="warehouse_id">
              {{ form.in_warehouse_name }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <vxe-table :data="form.detail" :round="true" height="500">
        <vxe-column field="sku" title="SKU"></vxe-column>
        <vxe-column field="owner_name" title="货主"></vxe-column>
        <vxe-column field="sku_cn_title" title="产品名称" width="300">
          <template #default="{ row }">
            {{ row.sku_cn_title || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="out_warehouse_num" title="申请数量"></vxe-column>
        <vxe-column title="收货数量">
          <template #default="{ row }">
            <template v-if="handleType == 'view'">
              {{ row.receive_num || '--' }}
            </template>
            <el-input v-else v-model="row.receive_num" placeholder="收货数量" />
          </template>
        </vxe-column>
        <vxe-column field="remark" title="备注"></vxe-column>
      </vxe-table>
    </template>

    <template #footer>
      <template v-if="handleType == 'view'">
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
      </template>
      <div class="flex justify-center py-2" v-else>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)">送上架</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getAdjustDetail, confirmAdjustOrder } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { viewDepthKey } from 'vue-router';

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])
const props = defineProps({
  options: {
    type: Array,
    default: [],
  },
})

const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {},
})
const { form, title, handleType, rules } = toRefs(data)

const statusMap = new Map([
  ['edit', '调拨入库详情'],
  ['view', '查看'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}


const getDetail = async (id) => {
  try {
    const res = await getAdjustDetail({
      id
    })
    res.data.detail.forEach(i => {
      i.receive_num = i.receive_num || ''
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}


const save = () => {
  const detail = form.value.detail.map(i => {
    return {
      id: i.id,
      receive_num: i.receive_num
    }
  })

  const flag = detail.every(i => i.receive_num)

  if (!flag) {
    ElMessage.error('收货数量需要大于0')
    return
  }

  confirmAdjustOrder({
    id: form.value.id,
    detail
  })
    .then((res) => {
      ElMessage.success(res.message)
      emits('query')
      close()
    })
    .finally((e) => {
      loading.value = false
    })
}

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
